<template>
    <a-layout class="layersty"   ref="layersty" style="height:100%;">
        <a-layout-content  style="order:1" class="defaultContent">
            <rx-layout>
                <template #middle>
                    <div id="rx-form-container" ref="printArea">
                      <div class="previewBox">
                        <x-form-build v-if="mdl.formConfig" ref="formBuild" :form-data="mdl.formData"
                                      :globalConfig="mdl.globalConfig"
                                      :permission="mdl.permission"
                                      :contextData="mdl.contextData"
                                      :form-config="mdl.formConfig"
                                      :form-js="mdl.formJs" :name="formSolution.name"
                                      :readOnly="true" :printReadonly="true"
                                      :dialogBox="dialogBox" :alias="mdl.formAlias"></x-form-build>
                      </div>
                    </div>
                </template>
            </rx-layout>
        </a-layout-content>
        <a-layout-footer style="order:0;" class="no-print" >
                <a-button type="primary"   @click="printArea()">{{$ti18('rxForm.print','打印')}}</a-button>
        </a-layout-footer>
    </a-layout>
</template>

<script>
import FormSolutionApi from "@/common/api/form/formSolution.js";
import DialogBox from "@/assets/js/dialogBox";

export default {
    name: "FormSolutionPrint",
    components: {},
    props: {},
    data() {
        return {
            dialogBox: DialogBox,
            mdl:{
                formConfig:"",
                formData:"",
                formJs:"",
                formAlias:"",
                globalConfig:{},
                permission:{},
                contextData:{}
            },
        }
    },
    created() {
        this.init();
    },
    mounted(){
        let self=this;

        if(!self.instId){
            return;
        }
        document.getElementById("btnFlowImage").addEventListener("click",function(e){
            self.flowImage=!self.flowImage;
            if(self.flowImage){
                e.target.parentNode.classList.add("ant-checkbox-checked");
            }else{
                e.target.parentNode.classList.remove("ant-checkbox-checked");
            }
            document.getElementById("flowImageDiv").style.display=self.flowImage?"block":"none";
        })
        document.getElementById("btnHistory").addEventListener("click",function(e){
            self.history=!self.history;
            if(self.flowImage){
                e.target.parentNode.classList.add("ant-checkbox-checked");
            }else{
                e.target.parentNode.classList.remove("ant-checkbox-checked");
            }
            document.getElementById("historyDiv").style.display=self.history?"block":"none";
        })

    },
    methods: {
        printArea(){
            window.print();
        },
        init(){
            let params=  this.$route.params;
            let alias=params.formAlias;
            let data;
            if(window.opener && window.opener['_getFormData_'+params.formAlias]) {
                data = window.opener['_getFormData_' + params.formAlias]();
            }
            if(window.opener && window.opener.formSolutionName){
                document.title=window.opener.formSolutionName;
            }
            let pk="";
            if(params.pkId){
                pk=params.pkId;
            }
            FormSolutionApi.getByAlias(alias,pk).then(result=> {
                if(result){
                    this.formSolution = result.formSolution;
                    if(data){
                        result.data=data;
                    }
                    if (result.metadata) {
                        let formConfig = JSON.parse(result.metadata);
                        if (formConfig) {
                            result.formConfig = formConfig;
                        }
                        if(!result.contextData){
                            result.contextData={};
                        }
                        if (result.data.INST_ID_ ) {
                            let contextDetail = {
                                instId: result.data.INST_ID_
                            };
                            Object.assign(result.contextData, contextDetail);
                        }else if(!this.pkId && this.formSolution && this.formSolution.flowDefMapping){
                            //新增时获取绑定的流程设计主键
                            let flows = JSON.parse(this.formSolution.flowDefMapping);
                            let defId ="";
                            if(flows && flows.length>0){
                                defId=flows[0].defId;
                            }
                            let contextDetail = {
                                defId: defId
                            };
                            Object.assign(result.contextData, contextDetail);
                        }
                        this.mdl.formJs =result.script;
                        this.mdl.formConfig = result.formConfig;
                        this.mdl.formData=result.data;
                        this.mdl.formAlias=result.alias;
                        this.mdl.globalConfig=result.globalConfig? JSON.parse(result.globalConfig) : {};
                        this.mdl.permission=result.permission;
                        this.mdl.contextData=result.contextData;
                    }
                }
            })
        },

    },

}
</script>

<style scoped>

.no-print{
    padding:  10px 20px;
    text-align: right;
}

#rx-form-container{
    padding:  10px 20px;
}

@media print {
    .no-print {
        display: none !important;
    }
    /* 其他打印样式 */
}
</style>
